/*
 * @Author: kanglang
 * @Date: 2020/7/28 11:03:02
 * @LastEditors: kanglang
 * @LastEditTime: 2021-02-05 14:16:51
 * @Description: 横向虚线
 */
import React, { Component, Fragment } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import { fontColorOrange, px2dp, splitLineColorLightGray, screenWidth } from '@/styles';
// import { splitLineColorLightGray } from './styles';

export default class DashLine extends Component {
  static defaultProps = {

  };

  render() {
    const { style, styleItem, columnFlag = false } = this.props;
    let len = Math.ceil(screenWidth / 10);
    let arr = [];
    for (let i = 0; i < len; i++) {
      arr.push(i);
    }

    return (
      <>
        {
          columnFlag ?
            <View style={[style, { width: px2dp(32), justifyContent: 'center', alignItems: 'center' }]}>
              {arr.map((item, index) => {
                return (
                  <View
                    style={[styles.verticalLine, styleItem]}
                    key={`dash${index}`}
                  />
                );
              })}
            </View> :
            <View style={[styles.dashLine, style]}>
              {arr.map((item, index) => {
                return (
                  <Text style={[styles.dashItem, styleItem]} key={`dash${index}`}>
                    {'  '}
                  </Text>
                );
              })}
            </View>
        }

      </>
    );
  }
}

const styles = StyleSheet.create({
  dashLine: {
    flexDirection: 'row',
  },
  dashItem: {
    flex: 1,
    height: px2dp(1),
    width: px2dp(2),
    marginRight: px2dp(2),
    backgroundColor: splitLineColorLightGray,
  },
  verticalLine: {
    height: px2dp(2),
    width: px2dp(2),
    marginBottom: px2dp(1),
    backgroundColor: '#999896',
  }
});
